import React, { Component } from "react";
import { Table, Tag, Space, Popconfirm, Button, Select, message } from "antd";
import { getRemarksListApi } from "../../apis/remarksApi";

const { Option } = Select;

export default class RemarkChart extends Component {
  state = {
    list: [],
    loading: false,
    total: 1,
    current: 1,
    type: "",
  };
  componentDidMount() {
    this.getList();
  }
  //拿数据 conditions代表搜索的条件
  getList = async (params) => {
    try {
      this.setState({ loading: true });
      const data = await getRemarksListApi(params);
      console.log("data", data);
      await this.setState({
        loading: false,
        list: data.data,
        total: data.totalCount,
        current: data.pageNumber,
      });
    } catch (error) {
      this.setState({ loading: false });
      console.log("err", error);
    }
  };

  //删除一个订单
  // deleteHandler = async (id) => {
  //     // console.info(id)
  //     const data = await deleteOneOrderApi(id);
  //     if (data) {
  //         this.getList({ pageSize: 6, pageNumber: 1, conditions: { type: this.state.type } });
  //     }
  //     message.success('删除成功');
  // }

  //分页
  onChange = (pageNumber, pageSize) => {
    console.info(pageNumber, pageSize);
    this.getList({
      pageSize: 3,
      pageNumber: pageNumber,
      conditions: { type: this.state.type, id: "" },
    });
  };

  //订单分类查找
  handleChange = async (e) => {
    const type = e !== "全部" ? e : "";
    console.log("type", type);
    await this.setState({ type });
    this.getList({
      pageSize: 3,
      pageNumber: 1,
      conditions: { type: type, id: "" },
    });
  };
  render() {
    const { list, loading, total, current } = this.state;
    const columns = [
      {
        title: "订单编号",
        render: (item) => {
          const order = item.orderId || {};
          return (
            <>
              <span key={`${order._id}-order`}>{order._id}</span>
            </>
          );
        },
      },
      {
        title: "车辆名称",
        render: (item) => {
          console.log("item", item);
          const carItem = item.carId || {};
          const carName = `${(carItem.brand || "").split(" ")[0]} ${
            carItem.number
          }`;
          return (
            <>
              <span key={`${carItem._id}-car`}>{carName}</span>
            </>
          );
        },
      },
      {
        title: "租车情况",
        render: (item) => {
          const car = item.carId || {};
          return (
            <>
              <span key={`${car._id}-cartype`}>{car.price}元 / 天</span>
            </>
          );
        },
      },
      {
        title: "用户",
        render: (item) => {
          const user = item.userId || {};
          return (
            <>
              <span key={`${user._id}-user`}>{user.name}</span>
            </>
          );
        },
      },
      {
        title: "评价状态",
        render: (item) => {
          const { rateStatus, score } = item;
          return (
            <>
              <Tag color="orange" key={`${item._id}-${item.status}`}>
                {rateStatus}
              </Tag>
              <strong style={{ color: "green", fontWeight: 600 }}>
                {score}分
              </strong>
            </>
          );
        },
      },
      {
        title: "订单描述",
        render: (item) => {
          const { info } = item;
          return (
            <>
              <p>{info}</p>
            </>
          );
        },
      },
    ];
    const pageination = {
      total,
      current,
      onChange: this.onChange,
      pageSize: 3,
    };
    return (
      <div>
        <div style={{ marginBottom: "24px" }}>
          <strong>按类型查找订单：</strong>
          <Select
            defaultValue="全部"
            style={{ width: 120 }}
            onChange={this.handleChange}
          >
            <Option value="全部">全部</Option>
            <Option value="好评">好评</Option>
            <Option value="差评">差评</Option>
            <Option value="中评">中评</Option>
          </Select>
        </div>

        <Table
          columns={columns}
          loading={loading}
          pagination={pageination}
          rowKey="_id"
          dataSource={list}
          height="40px"
        />
      </div>
    );
  }
}
